<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index-left.css">
    <link rel="stylesheet" href="css/index-right.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2159432_t8dt2onta1.css">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="total">
        
            <div class="top-left">
                <div class="header-left">
                    <img class="logo" src="images/组-18.png" alt="">
                </div>
                <div class="detail">
                    <div class="detail-content">
                      <div class="shop">
                            <img class="pic-user" src="images/user.png" alt="">
                            <span class="user-text">黑侠（光谷店）</span>
                        </div>
                            <div class="time">
                                <img class="pic-time" src="images/time.png" alt="">
                                <div class="time-txt">
                                    <span class="time-text p1">2016-04-06</span>
                                    <span class="time-text p2">10:23</span>
                                    <span class="time-text p3">AM</span>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="excel">
                    <div class="excel-title">
                        <img class="shouzi" src="images/shouzhi.png" alt="">
                        <span class="text-shouzhi">收支明细</span>
                    </div>
                    <div class="shouzhibg"></div>
                    <div class="excel-content">
                        <table class="type">
                            <tr class="line" style="font-weight: bold;">
                                <td style="width: 130px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品名</td>
                                <td>数量</td>
                                <td>金额</td>
                                <td>结算价</td>
                            </tr>
                            <tr class="line">
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;蛋挞</td>
                                <td>5</td>
                                <td>60</td>
                                <td>60</td>
                            </tr>
                            <tr class="line">
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全麦面包</td>
                                <td>1</td>
                                <td>10.5</td>
                                <td>10.5</td>
                            </tr>
                            <tr class="line">
                                <img class="free" src="images/曾.png" alt="">
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;戚风蛋糕</td>
                                <td>1</td>
                                <td>20</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三明治</td>
                                <td>5</td>
                                <td>60</td>
                                <td>60</td>
                            </tr>
                        </table>
                    </div>
                    <div class="shouzibg"></div>
                    <div class="float">
                        <div class="floating">
                            <img class="close" src="images/关闭.png" alt="">
                            <img class="plus" src="images/关闭.png" alt="" >        
                            <div class="cut"><hr></div>
                            <img class="donate" src="images/二维码.png" alt="" style="margin-top: 80px;">
                            <img class="change" src="images/修改.png" alt="">
                            <img class="bug" src="images/挂.png" alt="">
                            <img class="box" src="images/二维码.png" alt="">
                        </div>
                    </div>
                    <!-- <div class="shouzhi-bg">
                        
                    </div> -->
                    <div class="foot-left">                       
                        <div class="bill">
                            <p class="sum">
                                <span class="sum-left sum-text">总额：</span>
                                <span class="sum-right sum-text">￥125.5</span>
                            </p>                        
                            <input class="search" type="text" placeholder="    搜索商品">                       
                            <button class="btn1"><img src="images/搜.png" alt=""></button>
                            <button class="btn2"><img class="magnifier" src="images/fangdajing.png" alt=""></button>
                        </div>
                    </div>
                </div>
                </div>
            
            <div class="top-right">           
                <div class="logo-right"></div>              
                <div class="middle">
                    <div class="book"></div>
                    <div class="black">
                        <div class="black-content">
                        </div>
                        <div class="Box box1">
                            <img class="act" src="images/互动图标.png" alt="">
                            <div class="choc">
                                <p class="">0001</p>
                                <p>巧克力蛋糕</p>
                            </div>
                        </div>
                        <div class="Box box2" style="border: 1px solid rgb(204, 51, 51);">
                            <div class="choc">
                                <p class="">0001</p>
                                <p>巧克力蛋糕</p>
                            </div>
                        </div>
                        <div class="Box box3">
                            <div class="choc">
                                <p class="">0001</p>
                                <p>巧克力蛋糕</p>
                            </div>
                        </div>
                        <div class="Box box4">
                            <div class="choc">
                                <p class="">0001</p>
                                <p>巧克力蛋糕</p>
                            </div>
                        </div>
                        <div class="Box box5">
                            <div class="choc">
                                <p class="">0001</p>
                                <p>巧克力蛋糕</p>
                            </div>
                        </div>                    
                    </div>
                        <div class="title">
                            <a href="" class="first box qifeng">戚风蛋糕</a>
                            <a href="" class="box tart">蛋挞</a>
                            <a href="" class="box bread">全麦面包</a>
                            <a href="" class="box cake">戚风蛋糕</a>
                            <a href="" class="box sand">三明治</a>
                            <a class="iconfont icon-qiehuan" style="font-size: 24px;margin-bottom: 0px;"></a>
                        </div>
                </div>          
            </div>
        </div>           
        <div class="foot-container" style="left: 0;">         
            <p class="foot-text" style="color: #fff;">会员信息：</p>
            <div class="footer-text">
                <div class="ad">
                    <img src="images/管理台.png">
                    <p>管理台</p>  
                </div>
                <div class="card">
                    <img src="images/购物卡.png"> 
                    <p>购物卡</p>
                </div> 
                <div class="club">
                    <img src="images/会员.png">
                    <p>会员</p>
                </div> 
                <div class="pro">
                    <img src="images/促销.png" style="margin-right: 200px;">  
                    <p>促销</p>
                </div> 
                <div class="pre">
                    <img style="width: 47px;height: 47px;" src="images/clock.png">
                    <p>预定</p>
                </div> 
                <div class="shift">
                    <img src="images/交班22.png" style="background-color:  #333;border-radius: 50%;">                   
                    <p>交班</p>
                </div>
                <div class="hang">
                    <img src="images/挂单.png">
                    <p>挂单</p>
                </div> 
            </div> 
            <div class="center">
                <button>收银</button>
            </div>
                
        </div>
        
</div>                    
</body>
</html>